Here's the HTML head libraries

<meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<link href="css/jquery.mobile-1.4.5.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

<script type="text/javascript" src="js/app.js"></script>

And HTML body code looks like this

<div data-role="header" data-theme="a" data-position="fixed">
    <h1></h1>
    <div data-role="navbar">
        <ul>
            <li><a href="#one" class="ui-btn-active" data-icon="home">Home</a></li>
            <li><a href="#two" data-icon="info">About Us</a></li>
        </ul>
    </div>
</div>

<div data-role="page" id="one" data-title="Home" data-position="fixed">
    <div role="main" class="ui-content">
        <p>Hello World!</p>
    </div>
</div>

<div data-role="page" id="two" data-title="About Us" data-position="fixed">
    <div role="main" class="ui-content">
        <p>@2021/2022 some text</p>
    </div>
</div>

JS code i tried to change header h1 title but it's not working properly

$(document).ready(function () {
$("[data-role=header]").toolbar();
$("[data-role=header]").navbar();

$(document).on("pagecontainerchange", function () {
    let title = $(".ui-page-active").attr("data-title"); //get title of active page  
    $("[data-role=header] h1").text(title);
});

});

I hope to get this issue solve Thanks:)